<template>
    <div class="back">
        名字：<input type="text" v-model="searchCondition.name">
        年龄：<input type="text" v-model="searchCondition.age">
        <button @click="search">搜索</button>
        <table border="1" cellspacing="0">
            <tr>
                <td>ID</td>
                <td>名字</td>
                <td>年龄</td>
            </tr>
            <tr v-for="user of userList" :key="user.id">
                <td>{{ user.id }}</td>
                <td>{{ user.name }}</td>
                <td>{{ user.age }}</td>
            </tr>
        </table>
    </div>
</template>

<script setup name="User">
    import {reactive, ref} from 'vue'
    import userApi from '@/api/user'

    let userList = ref([])

    //搜索条件
    let searchCondition = reactive({
        name: '',
        age: ''
    })

    search()

    function search() {
        userApi.list(searchCondition).then(result => {
            userList.value = result.data
        })
    }



</script>

<style scoped>
    .back {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }

    button {
        margin: 0 5px;
    }

    li {
        font-size: 20px;
    }
</style>